<template>
  <div>
    <div class="page_title">通知管理{{}}</div>
    <div class="box">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="消息通知" prop="title"> </el-table-column>
        <el-table-column label="是否开启">
          <template #default="scope">
            <el-switch v-model="scope.row.isOn" class="ml-2" />
          </template>
        </el-table-column>
        <el-table-column label="发送对象">
          <template #default="scope">
            <el-select v-model="scope.row.user" placeholder="请选择" >
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script name="list-two" setup>
const tableData = reactive([
  { title: "申报发起", isOn: true, user: 2 },
  { title: "审批通过", isOn: false, user: 0 },
  { title: "审批驳回", isOn: true, user: 0 },
  { title: "待审批", isOn: true, user: 0 },
  { title: "暗访结果录入", isOn: true, user: 0 },
  { title: "验收结果录入", isOn: true, user: 0 },
  { title: "验收申请发起", isOn: true, user: 0 },
  { title: "验收申请通过", isOn: true, user: 0 },
]);
const options = [
  {
    value: 0,
    label: '区局',
  },
  {
    value: 1,
    label: '街镇',
  },
  {
    value: 2,
    label: '审批人',
  }
]
</script>
<style lang="scss" scoped>
::v-deep .el-table__header {
  width: 100% !important;

  .el-table__cell {
    color: #2c3a4d;
    font-weight: 400;
    background-color: #fafafa;
  }
}
</style>
